import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/style/reset.css'// 全局样式重置
import '@/assets/style/root.css'// 全局样式配置

import ElementPlus from 'element-plus'//element-plus组件库
import 'element-plus/dist/index.css'//element-plus组件库样式
import 'element-plus/theme-chalk/dark/css-vars.css'; //element-plus暗黑模式主题样式
import * as ElementPlusIconsVue from "@element-plus/icons-vue"; //element-plus图标

import router from "@/router/index.js"// 路由配置
import { createPinia } from "pinia";//pinia第一步
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'//pinia数据持久化插件

import { install } from '@icon-park/vue-next/es/all';//引入字节跳动图标库
import '@icon-park/vue-next/styles/index.css';//字节跳动图标库样式

import { useIntersectionObserver } from '@vueuse/core';//引入vueuse中的判断方法:该元素是否在视口中

import VueLazyLoad from 'vue3-lazyload'//图片懒加载插件
import loading from "@/assets/img/loading.gif"//加载图
import viteSvg from "./assets/img/vite.svg"//失败图

const app = createApp(App)

const pinia = createPinia();//pinia第二步
pinia.use(piniaPluginPersistedstate)//挂载持久化插件

install(app);//字节跳动图标库全局安装到app实例上

// console.log(".env文件", import.meta.env);//运行环境

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
} //遍历图标组件并挂载
app.use(pinia)
app.use(router)
app.use(ElementPlus)

// 图片懒加载指令，v-img-lazy="{src: '图片地址', placeholder: '占位图地址'}"
app.directive("img-lazy", {
  mounted(el, binding, vnode) {
    // 判断el是否在视口中
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      // isIntersecting: 判断是否在视口中,返回布尔值
      if (isIntersecting) {
        el.src = binding.value;
        stop();//图片出现在视口中后，停止监听
      }
      console.log("触发状态:", isIntersecting, "绑定值:", binding.value, "绑定元素:", el, '节点：', vnode);
    });
  }
});
// 图片预览指令，v-preview="src: '图片地址'"
app.directive("preview", {
  mounted(el, binding) {
    const img = el;
    const src = binding.value;
    img.src = src;
    img.style.cursor = "pointer";
    img.addEventListener("click", () => {
      const div = document.createElement("div");
      div.style.position = "fixed";
      div.style.top = "0";
      div.style.left = "0";
      div.style.width = "100%";
      div.style.height = "100%";
      div.style.background = "rgba(0,0,0,0.5)";
      div.style.zIndex = "999";
      div.style.display = "flex";
      div.style.justifyContent = "center";
      div.style.alignItems = "center";
      const img = document.createElement("img");
      img.src = src;
      img.style.maxWidth = "100%";
      img.style.maxHeight = "100%";
      img.style.cursor = "move";
      img.style.userSelect = "none";// 禁止选中
      img.style.position = "absolute";
      div.appendChild(img);
      document.body.appendChild(div);
      // 1.图片拖动
      let isDown = false;
      let x = 0;
      let y = 0;
      // pc端拖动事件
      img.onmousedown = function (e) {// 鼠标按下
        e.preventDefault();
        isDown = true;
        x = e.clientX - img.offsetLeft;
        y = e.clientY - img.offsetTop;
        document.onmousemove = function (e) {
          if (isDown) {
            img.style.left = e.clientX - x + "px";
            img.style.top = e.clientY - y + "px";
          }
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;// 鼠标松开时，移除事件
        };
      };
      // 移动端拖动事件
      img.ontouchstart = function (e) {
        e.preventDefault();
        isDown = true;
        x = e.touches[0].clientX - img.offsetLeft;
        y = e.touches[0].clientY - img.offsetTop;
        document.ontouchmove = function (e) {
          if (isDown) {
            img.style.left = e.touches[0].clientX - x + "px";
            img.style.top = e.touches[0].clientY - y + "px";
          }
        };
        document.ontouchend = function () {
          document.ontouchmove = document.ontouchend = null;
        };
      };
      //2. 图片放大缩小
      let scale = 1;
      img.addEventListener("wheel", (e) => {
        e.preventDefault();
        if (e.deltaY > 0) {
          scale -= 0.1;
        } else {
          scale += 0.1;
        }
        img.style.transform = `scale(${scale})`;
      });
      // 关闭预览
      div.addEventListener("click", () => {
        document.body.removeChild(div);
      });
      img.addEventListener("click", (e) => {
        e.stopPropagation();
      });
    });
  }
})
// 图片懒加载插件配置
app.use(VueLazyLoad, {
  loading: loading,//加载图片
  error: viteSvg,//错误图片
  lifecycle: {
    // 加载中
    // loading: (el) => {
    // console.log('loading', el)
    // },
    // 加载失败
    error: (el) => {
      console.log('error', el)
    },
    // 加载完毕
    // loaded: (el) => {
    //   console.log('loaded', el)
    // }
  },
  // delay: 1000//手动延时
})

app.mount('#app')
